<template>
  <div class="block">
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :expand-on-click-node="false"
      :render-content="renderContent"
      default-expand-all>
    </el-tree>
  </div>
  <!-- default-expand-all -->
</template>

<script>
  let id = 1000;

  export default {
    data() {
      const data = [{
        id: 1,
        label: '新品',
        children: [{
          id: 4,
          label: 'CGLDG系列',
        },{
          id:5,
          label:'BZDZLLY系列'
        }]
      }, {
        id: 2,
        label: '高端定制',
        children: [{
          id: 6,
          label: '轻奢家居'
        }, {
          id: 7,
          label: '意式极简'
        }]
      }, {
        id: 3,
        label: '展厅现货',
        children: [{
          id: 8,
          label: '现代极简'
        }]
      }];
      return {
        data: JSON.parse(JSON.stringify(data)),
        data: JSON.parse(JSON.stringify(data))
      }
    },

    methods: {
      //获取列表
    getList(pageNum) {
      if (pageNum) this.params.pageNum = pageNum;
      this.$http({
        url: "/admin/classified",
        params: this.params,
      }).then((res) => {
        res.send({errorMsg:'获取成功'})
      });
    },
      // append(data) {
      //   const newChild = { id: id++, label: 'testtest', children: [] };
      //   if (!data.children) {
      //     this.$set(data, 'children', []);
      //   }
      //   data.children.push(newChild);
      // },
      //修改数据
    edit() {
      this.dialogFormVisible = true;
    },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button class="edit" plain size="mini" type="primary" on-click={ () => this.edit(data) }>编辑</el-button>
              <el-button plain size="mini" type="danger" on-click={ () => this.remove(node, data) }>删除</el-button>
            </span>
          </span>);
      }
    }
  };
</script>

<style>
.edit{
  margin-left: 20px;
}
.el-tree {
  width: 700px;
}
.el-tree-node__content{
  padding: 12px;
}
</style>